// header
header{
    position: relative;
    .carnum{
        font-weight: 600;
        color: orangered;
    }
    .ntop{
        height: 10px;
        min-height: 35px;
        border: none;
        .logtp{
            color: #f40!important;
        }
        .gcar{
            &:hover{
                background-color: white;
            }
        }
        .shu{
            margin-top: 5px;
        color: #ccc;}
        a{
            padding:0 6px!important;
            line-height: 35px!important;font-size: 12px;
            color: #6c6c6c!important;
            .glyphicon-shopping-cart,.glyphicon-menu-hamburger{
                color: orangered;
            }
        }
        .boxt{
            position: relative;
            padding: 0;
        }
        .log{
            color: #f22e00!important;
            font-size: 13px;
        }
        div>ul>li>a:hover:not(.area){
            color: orangered!important;
            
        }
            .bgw:hover{
            background-color: white!important;
        }
    
        .area{
            color: black!important;
            +.dropdown-menu{
                overflow-y: scroll;
                height: 288px;
                >li>a{
                color: black!important;
            }
            }
        }
        .area:hover{
        cursor:default;
        
        }
        .rnav{
            position: static;
            .container .row h4{
                font-size: 16px;
                font-weight: 600;
            }
            .container{
                padding: 0px;
                .row>div>div>div{
                    padding: 0!important;
                    margin-top: 7px;
                    box-sizing: content-box;
                a{ color: black!important;
                    // display: block;
                
                line-height: 25px!important;
                text-align: center;
            padding: 5px!important;}
                }
                .row{padding-left: 15px;}
                .row>div:nth-child(1) h4{color: orangered;
                }
                .row:nth-child(1)>div:nth-child(1) a:hover{
                    background-color: orangered;
                    color: white!important;
                    text-decoration: none;
                }
                .row>div:nth-child(2) h4{color: yellowgreen;}
                .row .ts a:hover{
                    background-color: yellowgreen;
                    color: white!important;
                    text-decoration: none;
                }
                .row>div:nth-child(3) h4{color: #d75696;}
                .row .app a:hover{
                    background-color: #d75696;
                    color: white!important;
                    text-decoration: none;
                }
                .row>div:nth-child(4) h4{color: #2e9fdb;}
                .row .tj a:hover{
                    
                    background-color: #2e9fdb;
                    color: white!important;
                    text-decoration: none;
                    margin: 0 auto;
                }
            >.row>div:not(:nth-last-child(1)){
                border-right:1px solid #eee;
                padding-right: 10px;
            }
            >.row>div:first-child{
                padding-left: 30px!important;
            }
            }
        }
        ul>.dropdown:hover>.dropdown-menu{
            display: block;
            box-shadow: none;
            border-color: #eee;
            border-top: none;
        }
        .navbar-right .dropdown-menu{
            left: 0!important;
        }
    }
    .na-mid{
        position: relative;
        padding: 0 0 15px 0;
        >a{
            margin: 45px;
            img{
                width: 96px;
                height: 38px;
            }
        }
        .more{
            position: absolute;
            top: 10px;
            display: inline-block;
            >span{
                border: 1px solid #e2e2e2;
                font-size: 12px;
                padding:4px 8px;
                position: relative;
                z-index: 22;

            }
            >span:hover{
                border-bottom-color:white ;
            }
            >span:hover+div,>span+div:hover{
                border: 1px solid #e6e6e6;
            }
            >span+div{
                position: relative;
                padding-top: 5px;
                margin-top: 1px;
                border: 1px solid transparent;
                z-index: 2;
                dl:hover{

                    background-color: rgb(245, 245, 245);
                    border-top: 1px solid #e6e6e6;
                    border-bottom: 1px solid #e6e6e6;
                }
                dl{
                    padding: 0 15px;
                    border: 1px solid transparent;
                    padding-bottom: 5px;
                    margin-bottom: 0;
                    padding-top: 3px;
                    dt{

                        a{
                            font-size: 12px;
                            color: #666;
                        }
                        
                    }
                    dd{
                        
                        a{
                            font-size: 12px;
                            color: black;
                        }
                        
                        margin-left: 10px;
                    }
                }
            }
            .more1:hover+.ls-dl{
                height: 620px;
            }
            .ls-dl:hover{
                height: 620px;
            }
            .ls-dl{
                background-color: white;
                overflow: hidden;
                height: 0;
                transition: height 1s cubic-bezier(.26,.39,.15,1.46);
                
            }
            
        }
        .sear{
            width: 428px;
            input{
                width: 285px;
                height: 30px;
                outline: none;
                border: 2px solid #f40;
                text-indent: 1em;
            }
            span{

                button{
                    height: 30px;
                    width: 72px;
                }
                button:first-child{
                    border: 1px solid #f40;
                    background-color: #f40;
                    color: white;
                    line-height: 10px;
                    font-size: 12px;
                    outline: none;
                }
                button:last-child{
                    color: #f40;
                    border: 1px solid #ffb086;
                    margin-left: 3px;
                    line-height: 10px;
                    font-size: 12px;
                    background-color: #ffe4d0;
                    outline: none;
                }
            }                
        }
    }
    .hd-bot{
        background-color: rgb(216, 231, 250);;
        >img{
            display: block;
            margin: 0 auto;
        }
        >img+div{
            background-color: rgb(63, 127, 201);
            height: 30px;
            padding-left: 310px;
            a{
                color: white;
                font-size: 12px;
                display:inline-block;
                width: 105px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                &:hover>i{
                    opacity: 1;
                }
                &:hover{
                    background-color: rgb(44, 89, 144);
                }
                span{
                    margin-left: 5px;
                }
                i{
                    opacity: 0.7;
                }
            }
        }
    }

}
// main
main{
    width: 1119px!important;
    padding: 0!important;
    border-bottom: 1px solid #e8e8e8;
    .prod{
        border: 1px solid #e8e8e8;
        margin-top: 10px;
        padding: 0 0 20px 0 !important;
        height: 608px;
        .img{
            padding: 20px 0 20px 20px;
            position: relative;
            width: 420px;
            height: 440px;
            
            img{
                cursor: move;
                width: 400px;
                height: 400px;
            }
            img+div{
                width: 120px;
                height: 120px;
                position: absolute;
                display: none;
                background-image: url(../img/fdj.png);
                cursor: move;
            }
            span{
                display: block;
                width: 400px;
                height: 400px;
                border: 1px solid #ccc;
                position: absolute;
                left: 420px;
                top: 20px;
                background-size: 960px 960px;
                z-index: 999;
                background-position: 0 0;
                background-repeat: no-repeat;
                display: none;
            }

        }
        .img-li{
            padding-left: 20px;
            img{
                width: 50px;
                height: 50px;
                margin-right: 10px;
                cursor: pointer;
                border: 2px solid transparent;
                transition: all 0.2s;
                &:hover{
                    border: 2px solid #f40;
                }
            }
        }
        .coll{
            margin-top: 20px;
            padding-left: 20px;
            span{
                color:rgb(255, 143, 28) ;

            }
            a{
                font-size: 12px;
                color: #6c6c6c;
                vertical-align: middle;
            }
        }
        border-bottom: none;
        border-right: none;
    }
    .main-mid{
        >div{
            margin-bottom: 10px;
            >span:nth-child(1){
                color: #6c6c6c;
                display: inline-block;
                font-size: 12px;
                margin-left: 10px;
            }
            >span:nth-child(2){
                margin-left: 50px;
            }
        
        }
        width: 498px;
        padding-left: 18px;
        margin-top: 10px;
        border-top: 1px solid #e8e8e8;
        position: relative;
        >a:first-child{
            display: block;
            padding: 0 11px;
            position: absolute;
            right: 15px;
            top: -8px;
            font-size: 12px;
            color: #9c9c9c;
            background-color: white;
        }
        >h3{
            font-size: 16px;
            font-weight: 600;
        }
        .price{
            background-color: #FFF2E8;
            padding: 10px;
            margin-top: 15px;
            span:first-child{
                color: #6c6c6c;
                display: inline-block;
                font-size: 12px;
            }
            >em{
                font-size: 24px;
                margin-left: 30px;
                color: #f40;font-weight: 600;
            }
            >div{
                width: 62px;
                span{
                    vertical-align: middle;
                    text-align: center  ;
                    display: inline-block;
                    font-size: 12px;
                    i{
                        font-size: 20px;
                    }
                }
                .rt{
                    border-left: 1px solid #ffe4d0;
                    margin-left: -3px;
                    padding-left: 8px;
                    
                }
                
            }
            .lt{
                cursor: pointer;
            }
            .lt:hover{
                    i{
                        
                        color: #bbb;
                    
                    }
                }
        }
        .area{
            border-bottom: 1px dotted #d9d9d9;
            padding-bottom: 5px;
            span{
                color: #6c6c6c;
                display: inline-block;
                font-size: 12px;
                margin-left: 10px;
            }
            span:nth-child(n + 3){
                border: 1px solid transparent;padding: 0 3px;
                &:hover{
                    border-color: #f22e00;
                    color: #f22e00;
                    background-color: #ffe4d0;
                }
            
                i{
                    margin-left: 3px;
                }
            }

        }
        .co-ty{

            span:not(:first-child){
                margin-right: 5px;
                border: 2px solid #DCDCDC;
                display: inline-block;
            
                height: 32px;
                line-height: 30px;
                font-size: 12px;
                padding: 0 4px;
                transition: all 0.3s;
                cursor: pointer;
                &:hover{
                    
                    border: 2px solid #f40!important;
                }
            }
        }
        .ty{
            span:not(:first-child){
                margin-right: 5px;
                border: 2px solid #DCDCDC;
                display: inline-block;
            
                height: 32px;
                line-height: 30px;
                font-size: 12px;
                padding: 0 4px;
                transition: all 0.3s;
                cursor: pointer;
                &:hover{
                    color: #f40;
                    border: 2px solid #f40!important;
                }
            }
        }
        .color{
            display: inline-block;
            
            height: 32px;
            line-height: 30px;
            color: #f40;
            border: 2px solid #f40!important;
            font-size: 12px;
            padding: 0 4px;
            cursor: pointer;
        }
        .fw{position: relative;
            
            
            ul{
                
                position: absolute;
                left: 115px;
                top: 0;
                z-index: 20;
                background-color: white;
                
                li:nth-child(1){
                    padding: 1px;
                    border: 1px solid #dedede;
                    
                    &:hover~li{
                        display: block;
                    }
                }
                li:not(:first-child){
                 
                 border: 1px solid #ffb178;   border-top: 1px solid transparent;
                 display: none;
                 
            }
                }
             li{
                 width: 224px;
                 height: 26px;
                 
                 span{
                    margin: 0 5px;
                 }
                 span:last-child{
                     display: inline-block;
                     line-height: 20px;
                 }
             }  
             .bor1{
                padding: 0;
                border: 2px solid #f22e00!important;
            } 
        }

        .num{
            .del{
                cursor: no-drop;
                color: #ccc;
                font-weight: 600;
                user-select: none;
            }
            .inc{
                cursor: pointer;
                user-select: none;
            }
            input{
                outline: none;
                width: 50px;
                height: 28px;
                border: 1px solid #ccc;
                margin-top: 5px;
                text-align: center;
                
            }
            span:nth-child(even){
                display: inline-block;
                background-color: #ededed;
                font-weight: 600;
                font-size: 20px;
                width: 28px;
                height: 28px;
                text-align: center;
                line-height: 26px;
                border: 1px solid #ccc;
                vertical-align: middle;
            }
            span:nth-child(2){
                position: relative;
                left: 8px;
                top: -2px;
            }
            span:nth-child(4){
                position: relative;
                left: -8px;
                top: -2px;
            }
        }
        .flower{
            span:not(:nth-child(1)){
                display: inline-block;
                width: 96px;
                height: 46px;
                border:1px solid #c3c3c3;
                color: #333;
                text-align: center;
                padding: 3px 3px ;
                font-size: 12px;
                vertical-align: middle;
                cursor: pointer;
            }
            .act{
                border-color:#f40!important ;
                color: #f40!important;
            }
        }
        .buy{
            margin-bottom: 30px;
            a{
                border-radius: 2px;
                font-size: 16px;
                width: 134px;
                line-height: 38px;
                display: inline-block;
                height: 38px;
            }
            a:first-child{
                margin-top: 50px;
                margin-left: 10px;
                display:inline-block;
                color: #E5511D;
                border-color: #F0CAB6;
                background: #FFE4D0;
                text-align: center; 
                &:hover{
                    background-color: #ffd9bc;
                }
            }
            a:last-child{
                width: 180px;
                color: #FFF;
                border-color: #F40;
                background: #F40;
                text-align: center; 
                font-weight: 600;
                &:hover{
                    background-color: #ff2d00;
                }
            }
        }
        div:last-child{
            margin-bottom: 30px;
            span:not(:first-child){
                margin-right: 5px;
                cursor: pointer;
                img{
                    height: 16px;
                    margin-right: 5px;
                }
            }
        }
    }
    .main-r{
        margin-top: 10px;
        border: 1px solid #ffe2a3;

        >div:nth-child(2){
            
            background-image:url(../img/bg.png) ;
            background-size: 198px;
            div{
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #e26204;

                i{
                color: #f40;
                
                }
            }
        }
        .house{
            padding: 0 10px 5px 20px ;
            h4{
                a{
                    font-size: 12px;
                    color: #3c3c3c;
                    font-weight: 600; 
                }
                
            }
            p{
                font-size: 12px;
                a{
                    color: #3c3c3c;
                }
            }
            p:nth-child(2){

                a{
                    img{
                        margin-bottom: 5px;
                    }
                }
            }
            p:nth-child(4){
                margin-top: -7px;
                a{
                    display: inline-block;
                    width: 70px;
                    height: 20px;
                    background-image: url(../img/lxi.gif);
                    position: relative;
                    top: 3px;
                    cursor: pointer;
                }
                
            }
            p:last-child{
                padding-bottom: 10px;
                border-bottom: 1px solid #e1e1e1;
                img{
                    position: relative;
                    top: -3px;
                }
            }
        }
        .house+div{
            margin-bottom: 10px ;
            >div{
                margin: 0 auto;
                    width: 140px;
                >div:not(:last-child){
                    border-right: 1px solid #ebebeb;
                        margin-right: 10px;
                        padding-right: 5px;
                        text-align: center;
                    
                }
                
            }
        }
        .int{
            padding-left: 20px;
            margin-bottom: 20px;
            a{
                color: #3C3C3C;
                display: inline-block;
                margin-right: 5px;
                width: 74px;
                height: 28px;
                text-align: center;
                line-height: 28px;
                border: 1px solid #EDEDED;
                border-radius: 2px;
                background: #FAFAFA;
                &:hover{
                    border-color: #E0E0E0;
                    background: #F5F5F5;
                }
            }
        }
        .int+div{
            padding: 17px 12px 0 15px;
            border: 1px solid #e8e8e8;
            position: absolute;
            left: -1px;
            bottom: -1px;
            width: 200px;
            height: 247px;
            border-top: 1px solid #ffe2a3;
            
            p{
                font-size: 12px;
                color: #666;
                
                
            }
            img{
                display: block;
            }
            .p1{
                margin-top: 17px;
            }
            img+p{
                text-align: center;
                color: #F40;
                font-weight: 600;
                font-size: 14px;
            }
            div:nth-child(3){
                    margin-left: 10px;
                    
            }
        }
        position: relative;
        height: 608px;
        border-bottom: none;
    }
}   


footer{
    margin-top: 20px;
    .ft-top{
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        padding-top: 5px;
        padding-left: 5px;
        span{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            a{

            color: #6c6c6c;
            font-size: 12px;
            margin-right: 5px;
            }
            a:hover{
                color: #f40;
            }
            i{
                color: #ccc;
                font-weight: 600;
                opacity: 0.8;
            }
        }
        
    }
    .ft-mid{
        
        p{
            padding-top: 5px;
            padding-left: 5px;
            margin-bottom: 0;

                a{
                    color: #6c6c6c;
                    font-size: 12px;
                    margin-right: 5px;
                }
                a:hover{
                    color: #f40;
                }
                span{
                    color: #ccc;
                    font-weight: 600;
                    opacity: 0.8;
                    margin-left: 10px;
                    margin-right: 10px;
                }
                em{
                    margin-left: 30px;
                    color: #9c9c9c;
                    font-size: 12px;
                }
                .f-a{
                    color: black;
                }
                .em1{
                    margin-left: 5px;
                }
                .em2{
                    margin-left: 0px;
                }
                
        }
        div:last-child{
            padding-left: 10px;
                    margin-top: 10px;
                }
    }
   
}